//-------------------------------------------------------------------------------------------------
// author zhangwei on 2015.08.10
// modified by zhangwei on 2015.08.10
// - Released ver v1. This version is the clone from: https://github.com/TahaSh/Tasks-App-With-VueJS
//   And there's a good article about it: http://taha-sh.com/blog/many-js-frameworks-but-vuejs-is-different 
// modified by zhangwei on 2015.08.10
// - Released ver 2. This is a readonly list.
// modified by zhangwei on 2015.08.10
// - Released ver 3. Add task delete support.
// modified by zhangwei on 2015.08.10
// - Released ver 4. Add task completed status support. The display style (css) will be automatically
//   switched according to the completed property of the model.
// modified by zhangwei on 2015.08.10
// - Released ver 5. Add addTask support. Now the user can add new task into the list.
// modified by zhangwei on 2015.08.10
// - Released ver 6. Add edit task support. Now the user can edit a task by double click it.
//
// Reference
// - http://taha-sh.com/blog/many-js-frameworks-but-vuejs-is-different 
//-------------------------------------------------------------------------------------------------

new Vue({
    el: '#app',
	
	data: {
        tasks: [
            { title: 'Go to grocery store', completed: false },
            { title: 'Do the dishes', completed: false },
            { title: 'Call John', completed: false }
        ],
		
		newTask: { title: '', completed: false},
		editingTask: false
    },
	
	methods: {
		addTask: function() {
			if ( ! this.newTask.title) {
				return;
			}

			this.tasks.push({
				title: this.newTask.title,
				completed: false
			});

			//this.newTask = { title: '', completed: false};
		},

		removeTask: function(task) {
			this.tasks.$remove(task);
		},
		
		startEditingTask: function(task) {
			this.newTask = task;
			this.editingTask = true;
		},
		
		pressedEnter: function() {
			if ( ! this.editingTask) {
				this.addTask();
			}
    
			this.newTask = { title: '', completed: false};
			this.editingTask = false;
		}
	}

});
